<template>
  <view class="word-wrapper">
    <text class="word-title">听文本，并尝试朗读</text>
    <image v-if="props.dialogue.img" class="word-image" :src="`${env.prefixUrl}${props.dialogue?.img}`" />
    <loudspeaker class="word-speaking" isAutoPlay :voice="props.dialogue?.us_voice" />
    <text class="word-sentence">
      {{ props.dialogue?.sentences }}
    </text>
    <view class="word-space"></view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import env from "@/config/env";
import loudspeaker from "@/components/loudspeaker.vue";
import type { IDialogue } from "@/pages/lowPricedCourse/dialogueOriginText/index";

interface IProps {
  dialogue: IDialogue
}

const props = defineProps<IProps>();
</script>

<style scoped lang="scss">
@import "./dialogue.scss";
</style>